import React from 'react';
import * as PDFJS from 'pdfjs-dist';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';

import styles from './index.less';

PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker;

class Canvas extends React.Component {
  state = {
    cursor: 'default',
  };

  componentDidMount() {
    const { setRef } = this.props;
    if (setRef) {
      setRef(this.canvasContainerRef);
    }
    this.loadingDoc();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.url !== this.props.url || prevProps.file !== this.props.file) {
      const { url, onPdfLoading } = this.props;
      if (url && onPdfLoading) {
        onPdfLoading();
      }
      this.loadingDoc();
    }
  }

  loadingDoc = () => {
    const { url, onPdfLoadingSuccess, onNodata } = this.props;
    const loadingParams = {
      cMapUrl: 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/',
      cMapPacked: true,
    };
    if (url) {
      loadingParams.url = url;
      const loadingTask = PDFJS.getDocument(loadingParams);
      loadingTask.promise.then((pdf) => {
        if (onPdfLoadingSuccess) {
          onPdfLoadingSuccess(pdf, this.canvasRef);
        }
      });
    } else {
      onNodata(this.canvasRef)
    }
  };

  handleFocus = (e) => {
    e.preventDefault();
  };

  handleBlur = (e) => {
    e.preventDefault();
  };

  handleMouseDown = (e) => {
    e.preventDefault();
    const { onMouseDown } = this.props;
    if (onMouseDown) {
      onMouseDown(e);
    }
  };

  handleMouseMove = (e) => {
    e.preventDefault();
    const { onMouseMove } = this.props;
    if (onMouseMove) {
      onMouseMove(e);
    }
  };

  handleMouseUp = (e) => {
    e.preventDefault();
    const { onMouseUp } = this.props;
    if (onMouseUp) {
      onMouseUp(e);
    }
  };

  handleMouseOver = (e) => {
    e.preventDefault();
    const { drawable, markable } = this.props;
    let cursor = 'default';
    if (markable && drawable) {
      cursor = 'crosshair';
    } else {
      cursor = 'pointer';
    }
    this.setState({ cursor });
    const { onMouseOver } = this.props;
    if (onMouseOver) {
      onMouseOver(e);
    }
  };

  handleMouseOut = (e) => {
    e.preventDefault();
    this.setState({ cursor: 'default' });
    const { onMouseOut } = this.props;
    if (onMouseOut) {
      onMouseOut(e);
    }
  };

  render() {
    const { cursor } = this.state;
    const { loadingDoc, cWidth, cHeight, height = 594 } = this.props;

    return (
      <div ref={(r) => {
        this.canvasContainerRef = r;
      }} className={styles.viewerContainer} style={{ cursor, minHeight: 594, height }}>
        <div
          style={{
            width: cWidth + 18,
            height: cHeight + 18,
            visibility: loadingDoc ? 'hidden' : 'visible',
          }}
          className={styles.viewerCanvas}
        >
          <canvas
            ref={(r) => {
              this.canvasRef = r;
            }}
            className={styles.pdfContainer}
            onFocus={this.handleFocus}
            onBlur={this.handleBlur}
            onMouseMove={this.handleMouseMove}
            onMouseDown={this.handleMouseDown}
            onMouseUp={this.handleMouseUp}
            onMouseOver={this.handleMouseOver}
            onMouseOut={this.handleMouseOut}
          />
        </div>
      </div>
    );
  }
}

export default Canvas;
